import React, {useState} from "react";
import {Avatar, Button, Col, Input, List, Row} from "antd";
import "./index.css";
import axios from "axios";
import {RightOutlined} from "@ant-design/icons";

const GithubSearch: React.FC = () => {

    const [key, setKey] = useState('');
    const [loading, setLoading] = useState(false);
    const [users, setUsers] = useState<any[]>([]);

    const search = () => {
        setLoading(true);
        axios.get("https://api.github.com/search/users?q=" + key).then(
            res => {
                setUsers(res.data.items);
                console.log(res.data.items);
                setLoading(false);
            },
            err => {
                console.log(err);
                setLoading(false);
            }
        )
    }

    return (
        <div className="search">
            <Row>
                <Col span={20}>
                    <Input placeholder="请输入关键词"
                           allowClear={true}
                           onChange={e => setKey(e.target.value)}/>
                </Col>
                <Col offset={1} span={3}>
                    <Button type="primary" onClick={search} loading={loading}>Search</Button>
                </Col>
            </Row>
            <Row style={{marginTop: 40}}>
                <Col span={24}>
                    <List loading={loading} dataSource={users} renderItem={(item, index) => (
                        <List.Item>
                            <List.Item.Meta
                                avatar={<Avatar src={item.avatar_url}/>}
                                title={<a href="https://ant.design">{item.login}</a>}
                            />
                            <a target="_blank" href={item.html_url}>
                                <RightOutlined/>
                            </a>
                        </List.Item>
                    )}/>
                </Col>
            </Row>
        </div>
    )
}

export default GithubSearch;